<template>
  <div class="personal-header">
    <image
      class="personal-avatar"
      :src="user.avatar || defaultAvatar"
      mode="aspectFill"
      fit="contain"
    />
    <div class="personal-nickname">
      <div @click="toUserEdit" class="personal-nickname__title">
        {{ user.nickName || '修改昵称' }} <i class="iconfont icon-edit"></i>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Taro from '@tarojs/taro';
import { defaultAvatar } from '@/const/images';
import { toRef } from 'vue';
import './index.less';

export default {
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props) {
    const user = toRef(props, 'data');
    const toUserEdit = () => {
      Taro.navigateTo({
        url: `/subpackages/userEdit/index`,
      });
    };
    return {
      user,
      defaultAvatar,
      toUserEdit,
    };
  },
};
</script>
